<template>
  <div class="page">
    <div class="basic-info-box">
      <span>小龙坎优惠券</span>
      <span>时间券：1小时免费</span>
      <span>有效期：2018-11-06至2019-02-05</span>
    </div>
    <div class="main-box">
      <div class="item vux-1px-b">
        <span>发放后有效离场时间</span>
        <span>60分钟</span>
      </div>
      <div class="item vux-1px-b">
        <span>适用车场</span>
        <span>南海万科广场...</span>
      </div>
      <div class="item use-condition vux-1px-b">
        <div>使用条件</div>
        <div>
          <span>10元&lt;停车费&lt;100元</span>
          <span class="red">一次停车可使用：5张</span>
        </div>
      </div>
      <div class="item vux-1px-b">
        <span>其他说明</span>
        <span>说明文字XXXXX</span>
      </div>
      <div class="purchase-count vux-1px-b">
        <div>
          <span>优惠券数量</span>
          <span>无限</span>
        </div>
        <div>
          <span>购买数量</span>
          <input v-model.number="count" type="text" placeholder="请输入购买数量" @input="calculateTotal">
        </div>
      </div>
      <div class="price-box">
        <div>
          <span>原价</span>
          <span>￥{{unitPrice}}</span>
        </div>
        <div>
          <span>现价</span>
          <span>￥{{currentPrice}}</span>
        </div>
        <div>
          <span>小计</span>
          <span class="total">￥{{total}}</span>
        </div>
      </div>
    </div>
    
    <div class="footer-box">
      <div>
        <span>共计:&nbsp;</span>
        <span>￥</span>
        <span>{{total}}</span>
      </div>
      <div>立即支付</div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        title:'确认信息',
        total: 0.00,
        count: '',
        unitPrice: 10.00,
        currentPrice: 8.00,
      }
    },
    created(){
      this.$store.commit('setTitle',this.title)
      this.$store.commit('setShowCloseBtn',false)
    },
    methods: {
      calculateTotal(){
        var self = this;
        if (self.count === null || self.count === '') {
          self.$store.commit('showToast',{text:'数量不能为空'})
          return;
        }
        if (!/^[1-9]+[0-9]*]*$/.test(self.count)) {
          self.$store.commit('showToast',{text:'请输入大于等于0的数量'})
          return;
        }
        this.total = this.currentPrice * this.count;
      }
    }
  }
</script>

<style lang="less">
.basic-info-box{
  height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: url('../../assets/img/bg_confirmation information@2x.png') no-repeat 0 0;
  background-size: contain;
  span{
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    &:first-child{
      font-size: 40px;
      color: rgba(12,12,12,0.90);
    }
    &:nth-child(2){
      font-size: 26px;
      color: rgba(12,12,12,0.64);
    }
    &:last-child{
      font-size: 26px;
      color: rgba(12,12,12,0.64);
    }
  }
}
.main-box{
  background: #FFFFFF;
  margin-top: 20px;
  padding: 0 20px;
  div{
    span{
      font-size: 28px;
      color: #262626;
      letter-spacing: 0;
    }
    &.item{
      display: flex;
      justify-content: space-between;
      height: 100px;
      line-height: 100px;
    }
    &.use-condition{
      height: 146px;
      div{
        &:first-child{
          font-size: 28px;
          color: #262626;
        }
        &:last-child{
          display: flex;
          flex-direction: column;
          padding-top: 30px;
          span{
            height: 40px;
            line-height: 40px;
            &:first-child{
              font-size: 28px;
              color: #262626;
            }
            &:last-child{
              font-size: 24px;
              color: #F44A4A;
            }
          }
        }
      }
    }
    &.purchase-count{
      height: 152px;
      display: flex;
      flex-direction: column;
      div{
        flex: 1;
        display: flex;
        justify-content: space-between;
        &:first-child{
          span{
            padding-top: 20px;
          }
        }
        input{
          font-size: 28px;
          height: 40px;
          line-height: 40px;
          width: 196px;
          text-align: right;
        }
      }
    }
    &.price-box{
      height: 216px;
      display: flex;
      flex-direction: column;
      div{
        flex: 1;
        display: flex;
        justify-content: space-between;
        span{
          padding-top: 15px;
          &:first-child{
            font-size: 28px;
            color: #262626;
          }
          &:last-child{
            font-size: 32px;
            color: rgba(12,12,12,0.90);
          }
          &.total{
            color: rgba(199,148,47,0.90);
          }
        }
      }
    }
  }
}
.footer-box{
  display: flex;
  justify-content: space-between;
  height: 100px;
  padding-left: 20px;
  background: #FFFFFF;
  margin-top: 52px;
  div{
    line-height: 100px;
    span{
      &:first-child{
        font-size: 28px;
        color: #262626;
      }
      &:nth-child(2){
        font-size: 15px;
        color: #C7942F;
      }
      &:nth-child(3){
        font-size: 30px;
        color: #C7942F;
      }
    }
    &:last-child{
      background: #D8B060;
      width: 220px;
      height: 100%;
      text-align: center;
      font-size: 34px;
      color: #FFFFFF;
    }
  }
}
</style>
